import React, { useState, useEffect } from "react";
import { Button, Input, Tree, Radio, Table, Form, Typography } from "antd";
//引入图标库
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { DownOutlined } from "@ant-design/icons";
import "./PermissionSet.css";

const treeData = [
  {
    title: "菜单权限",
    key: "0-0",
    children: [
      {
        title: "组织结构",
        key: "0-0-0",
        children: [
          {
            title: "公司设置",
            key: "0-0-0-0",
          },
          {
            title: "角色设置",
            key: "0-0-0-1",
          },
          {
            title: "权限设置",
            key: "0-0-0-2",
          },
          {
            title: "用户设置",
            key: "0-0-0-3",
          },
          {
            title: "修改密码",
            key: "0-0-0-4",
          },
          {
            title: "组别设置",
            key: "0-0-0-5",
          },
          {
            title: "区域设置",
            key: "0-0-0-6",
          },
          {
            title: "码表维护",
            key: "0-0-0-7",
          },
        ],
      },
      {
        title: "产品管理",
        key: "0-0-1",
        children: [
          {
            title: "产品列表",
            key: "0-0-1-0",
          },
          {
            title: "产品类别设置",
            key: "0-0-1-1",
          },
          {
            title: "产品组合属性配置",
            key: "0-0-1-2",
          },
          {
            title: "Pfila属性设置",
            key: "0-0-1-3",
          },
          {
            title: "费用调整项期初设置",
            key: "0-0-1-4",
          },
          {
            title: "第三方费用基础设置",
            key: "0-0-1-5",
          },
        ],
      },
      {
        title: "parent 1-2",
        key: "0-0-2",
        children: [
          {
            title: "leaf",
            key: "0-0-2-0",
          },
          {
            title: "leaf",
            key: "0-0-2-1",
          },
        ],
      },
    ],
  },
  {
    title: "功能权限",
    key: "0-1",
    children: [
      {
        title: "组织结构",
        key: "0-1-0",
      },
      {
        title: "组织结构",
        key: "0-1-1",
      },
      {
        title: "组织结构",
        key: "0-1-2",
      },
      {
        title: "组织结构",
        key: "0-1-3",
      },
    ],
  },
];

export default function PermissionSet() {
  const [treeHeight, setTreeHeight] = useState(0);
  useEffect(() => {
    setTreeHeight(document.body.offsetHeight * 0.6);
  }, []);
  const onSelect = (selectedKeys, info) => {
    console.log("selected", selectedKeys, info);
  };

  //表格区数据
  const Column = [
    {
      title: "权限ID",
      dataIndex: "id",
      width: "20px",
      // editable: true,
      align: "center",
    },
    {
      title: "权限名称",
      dataIndex: "name",
      width: "100px",
      align: "center",
      // editable: true,
    },
    {
      title: "权限类型",
      dataIndex: "type",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "URL",
      dataIndex: "url",
      align: "center",
      width: "20px",
      // editable: true,
    },
    {
      title: "父亲ID",
      dataIndex: "parentId",
      width: "20px",
      align: "center",
      // editable: true,
    },
    {
      title: "二级域名",
      dataIndex: "sld",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "图标",
      dataIndex: "icon",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "排序索引",
      dataIndex: "rankIndex",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "维护人",
      dataIndex: "maintainer",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "维护日期",
      dataIndex: "date",
      width: "100px",
      align: "center",
      // editable: true,
    },
    {
      title: "备注",
      dataIndex: "note",
      width: "50px",
      align: "center",
      // editable: true,
    },
    {
      title: "操作",
      dataIndex: "operation",
      width: "200px",
      align: "center",
      // editable: true,
      render: () => {
        return (
          <>
            <Typography.Link
            // disabled={editingKey !== ""}
            // onClick={() => edit(record)}
            // style={{ marginRight: 10 }}
            >
              <FormOutlined />
            </Typography.Link>
            <Typography.Link
            // disabled={editingKey !== ""}
            // onClick={showDelModal}
            // style={{ marginRight: 10 }}
            >
              <DeleteOutlined />
            </Typography.Link>
          </>
        );
      },
    },
  ];
  const data = [
    {
      id: "201",
      name: "资料管理基本-功能",
      type: "功能权限",
      url: "/idsNS/common",
      parentId: "189",
      sld: "ids",
      icon: "/",
      rankIndex: "3",
      maintainer: "嫦娥",
      date: "2022-09-11",
      note: "/",
    },
  ];

  return (
    <>
      {/* 查询表单 */}
      <div className="headForm">
        <div>
          权限名称:
          <Input style={{ width: 120 }} placeholder="请输入权限名称" />
        </div>
        <div>
          二级域名:
          <Input style={{ width: 120 }} placeholder="请输入二级域名:" />
        </div>
        <div>
          备注:
          <Input style={{ width: 120 }} placeholder="备注" />
        </div>
        <div>
          <Button type="primary">查询</Button>
        </div>
      </div>
      {/* 表格区 */}
      <div className="tableArea">
        <div className="addBtn">
          <div>
            <Button type="primary">新增权限</Button>
          </div>
          <div>
            是否显示子级内容：<Radio></Radio>
          </div>
        </div>

        <div className="tableCon">
          {/* 树形控件 */}
          <div className="treeCon">
            {treeHeight && (
              <Tree
                showLine
                switcherIcon={<DownOutlined />}
                defaultExpandedKeys={["0-0-0"]}
                onSelect={onSelect}
                treeData={treeData}
                height={treeHeight}
              />
            )}
          </div>
          <div className="table">
            <Table
              rowKey="id"
              bordered={true}
              columns={Column}
              scroll={{ x: "max-content" }}
              dataSource={data}
            ></Table>
          </div>
        </div>
      </div>
    </>
  );
}
